<!--
/**
 * Created by PhpStorm.
 * User: Devmc
 * Date: 2021/4/23
 * Time: 1:18
 */
-->
<template>
  <div class="detail">
    <div class="tabs-wrap">
      <div class="tabs-cont">
        <div class="content-box" v-if="data.title">
          <h1 class="content-box-title">{{ data.title }}</h1>
          <div class="title-info">
            <span class="span02">发布者：{{ data.person }}</span>
            <span>活动时间：{{ data.time }}</span>
          </div>

          <div class="content-text" v-html="data.content"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import modelUser from "../../models/user";

export default {
  name: "MainDetail",
  props: {},
  data() {
    return {
      arcType: this.$route.params.type,
      arcID: this.$route.params.id || -1,

      data: {
        title: '',
        time: '',
        person: '',
        content: ''
      }
    }
  },
  created() {
    this.getData();
  },
  mounted() {
  },
  methods: {
    /**
     * 获取数据
     */
    getData() {
      let url = '';
      if (this.arcType == 'ann') url = this.$store.state.api + '/announcement/getById?announcementid=' + this.arcID;
      else url = this.$store.state.api + '/activity/getById?activityid=' + this.arcID;

      this.axios.get(url).then((response) => {
        if (response.data.code == 200) {
          const data = response.data.data;
          // 无数据
          if (data == null) {
            this.$message({
              type: 'error',
              message: '加载数据失败！',
              duration: 2000,
              onClose: () => {
                this.$router.replace('/');
              }
            });
          }
          else {
            this.data.content = data.content;
            this.data.time = new Date(data.time).format('yyyy-MM-dd hh:mm:ss');
            if (this.arcType == 'ann') this.data.title = data.title;
            else this.data.title = data.activityName;
            this.getPersonName(data.userId);
          }
        }
      }).catch((error) => {
        console.log(error);
      });
    },

    /**
     * 获取人名
     *
     * @param userId
     */
    getPersonName(userId) {
      modelUser.getUserDataById(userId).then((response) => {
        this.data.person = response.tuserName;
      });
    }
  },
  watch: {}
}
</script>

<style lang="less" scoped>
.detail {
  /*招生简章详情*/

  .tabs-menu .about-title .title04 {
    display: block;
    width: 229px;
    position: absolute;
    left: 28px;
    bottom: 10px;
  }

  .tabs-wrap .content-box {
    width: 100%;
    padding: 50px 0 0 0;
    overflow: hidden;
  }

  .content-box .content-box-title {
    width: 100%;
    height: 50px;
    line-height: 50px;
    font-size: 28px;
    text-align: center;
    overflow: hidden;
  }

  .content-box .title-info {
    width: 100%;
    text-align: center;
    padding: 20px 0;
    overflow: hidden;
  }

  .content-box .title-info span {
    font-size: 14px;
    color: #2B2B2B;
    opacity: 0.8;
    line-height: 25px;
  }

  .title-info span.span02 {
    margin: 0 30px;
  }

  .content-box .content-text {
    width: 100%;
    padding: 30px 0 40px 0;
    font-size: 14px;
    overflow: hidden;
    border-bottom: 1px dashed #e2e2e2;
    border-top: 1px dashed #e2e2e2;
  }

  .content-box .content-text p {
    text-indent: 2em;
    line-height: 25px;
    font-size: 14px;
    font-weight: 400;
  }

  .content-text p img {
    display: block;
    margin: 30px auto;
    max-width: 82px;
  }

  .content-text h3 {
    color: #151515;
    font-weight: bold;
    margin-top: 20px;
  }

  .art-page {
    padding: 20px 0 50px 0;
    overflow: hidden;
  }

  .art-page p {
    line-height: 25px;
    color: #262626;
    font-size: 14px;
  }

  .art-page a {
    display: inline-block;
    line-height: 25px;
    color: #262626;
    cursor: pointer;
  }
}
</style>